import { store } from "@/stores"
import { defineStore } from 'pinia'
import { ref } from 'vue'
import { urls } from '@/security/paths'
import { redirectTimeout } from '@/security/router'
import type { MenuVo } from '@/types/base/index'
import storage from '@/storage'

export const useMenusStore = defineStore("Menus", () => {

	// 当前选择菜单项
	const CurrentMenuItemNameKey = "CurrentMenuItemName"
	// 当前选择中的菜单项
	const currentSelectMunuItem = ref()

    // 记录各个页面滚动的位置
    const scrollIntoIdMap = new Map()

	// 当前选择菜单条
	const CurrentMenuBarNameKey = "CurrentMenuBarName"
	// 当前菜单
	const defaultMenuBarName = "base"
	const currentMenuBarName = storage.get(CurrentMenuBarNameKey) ?? defaultMenuBarName
	const currentMenuBar = ref<MenuVo[]>([])

	// 各个模块的菜单
	const menuBarMap = ref(new Map<String, MenuVo[]>())
	// 待办事项 模块菜单
	menuBarMap.value.set("base", [
		{ depend: "base", name: '支付宝', alias: 'zhifubao', icon: 'icon-zhifubao', iconStyle: { fontSize: '28px' }, url: urls.ZhiFuBao },
		{ depend: "base", name: '微信', alias: 'weixin', icon: 'icon-weixin', iconStyle: { fontSize: '28px' }, url: urls.WeiXin  },
		{ depend: "base", name: 'QQ', alias: 'qq', icon: 'icon-QQ', iconStyle: { fontSize: '28px' }, url: urls.QQ  },
		{ depend: "base", name: 'facebook', alias: 'facebook', icon: 'icon-facebook', iconStyle: { fontSize: '28px' }, url: urls.Facebook  },
		{ depend: "base", name: '功能菜单', alias: 'more', icon: 'icon-fenlei', iconStyle: { fontSize: '28px', }, url: urls.More  },
	])

	// 设置app启动菜单
	currentMenuBar.value = menuBarMap.value.get(currentMenuBarName)

	/* 切换菜单栏 */
	function setMenuBar(key : string) {
		storage.set(CurrentMenuBarNameKey, key)
		const menu = menuBarMap.value.get(key)
		if (menu) currentMenuBar.value = menu
	}

	/** 设置当前选择菜单名 */
	function setSelectMenuItem(name : string) {
		currentSelectMunuItem.value = name
		storage.set(CurrentMenuItemNameKey, name)
	}

	/**  获取当前选择菜单名 */
	function getSelectMenuItem() : string {
		if (currentSelectMunuItem.value) {
			return currentSelectMunuItem.value
		}
		let value = storage.get(CurrentMenuItemNameKey)
		if (value) {
			currentSelectMunuItem.value = value
		}
		return value
	}

    /** 记录各个页面滚动的位置 */
    function setScrollerId(name: string, id: string){
        scrollIntoIdMap.set(name, id)
        // 序列化到本地
        // const scrollerIds = storage.getJson(ScrollerIndexId)
        // scrollerIds[name] = id
        // storage.setJson(ScrollerIndexId, scrollerIds)
    }
	
	/** 获取页面滚动位置 */
	function getScrollerId(name: string): any {
		let id = scrollIntoIdMap.get(name)
		if(id){
			return id
		}else{
			// const scrollerIds = storage.getJson(ScrollerIndexId)
			// id = scrollerIds[name]
			// if(id){
			//     scrollIntoIdMap.set(name, id)
			// }
			// return id
			return 10
		}
	}
	
	/** 跳转到首页 */  
	function toHome(){
		setSelectMenuItem("zhifubao");
		redirectTimeout(urls.ZhiFuBao)
	}
		
	return {
		currentMenuBar,
		toHome,
		setMenuBar, setScrollerId, getScrollerId,
		setSelectMenuItem, getSelectMenuItem
	}
})

export function useMenusStoreHook() {
	return useMenusStore(store);
}